<template name="myGroupItem">
	<view class="orderItem" @tap="toMyDt">
		<view class="shopBox">
			<text class="iconfont icon-shoucangdianjia"></text>
			<text class="shopName" >{{orderItem.courseGroup.course.store.name.length>10?orderItem.courseGroup.course.store.name.substr(0,10)+'...':orderItem.courseGroup.course.store.name}}</text>
			<text class="iconfont icon-right"></text>
			<text class="orderStatus">{{statusArr[orderItem.status]}},已集齐{{orderItem.userCnt}}人</text>
		</view>
		<view class="goodBox" >
			<image class="goodImg" :src="orderItem.courseGroup.course.img"></image>
			<view class="infoBox">
				<text class="goodName" >{{orderItem.courseGroup.course.name}}</text>
				<text class="oldPirce">￥{{orderItem.courseGroup.course.price}}</text>
				<view class="priceBox" >
					<text>最高返：</text>
					<text class="price">￥{{mFanli}}</text>
				</view>
			</view>
		</view>
		<view class="btmOp" v-if="orderItem.status==0">
			<text>拼团仅剩 {{djsText}}</text>
			<button @tap.stop="share">邀请拼团</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
			})
		},
		name: 'myGroupItem', //组件名称
		// 传递参数
		props: {
			orderItem: {
				type: Object,
				default: null
			}
		},
		// 组件参数
		data() {
			return {
				mFanli: 0,
				statusArr:['待分享','拼团成功','拼团失败'],
				djsText:'00:00:00'
			}
		},
		// 组件方法
		methods: {
			mtd1() {
				if (this.orderItem.courseGroup.amount3) {
					this.mFanli = this.orderItem.courseGroup.amount3
				} else if (this.orderItem.courseGroup.amount2) {
					this.mFanli = this.orderItem.courseGroup.amount2
				} else {
					this.mFanli = this.orderItem.courseGroup.amount1
				}
			},
			toMyDt(){
				this.toPage({
					url:"myGroupDetail",
					id:this.orderItem.id
				})
			},
			daojishi(){
				let _now=new Date();
				let _end=new Date(Date.parse(this.orderItem.endTime.replace(/-/g, "/")));
				let _leftTime=_end.getTime()-_now.getTime();
				let _hour=Math.floor(_leftTime/(1000*60*60));
				let _min= Math.floor(_leftTime/(1000*60)%60);
				let _sec= Math.floor(_leftTime/1000%60);
				_hour=_hour>9?_hour:'0'+_hour;
				_min=_min>9?_min:'0'+_min;
				_sec=_sec>9?_sec:'0'+_sec;
				this.djsText= _hour + ":" + _min + ":" + _sec;  
			},
			share(){
				uni.$emit("showShareList",{
					type:1,
					id:this.orderItem.id,
					title:this.orderItem.courseGroup.course.name,
					img:this.orderItem.courseGroup.course.img
				})
			}
		},
		created() {
			setTimeout(() => {
				this.mtd1()
			}, 200)
			setInterval(()=>{
				this.daojishi()
			},1000)
		}
	}
</script>

<style lang="less" scoped>
	.orderItem {
		border-radius: 10upx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		display: flex;
		flex-direction: column;
		margin-bottom: 18upx;
		overflow: hidden;
		// padding: 36upx 20upx 36upx 36upx;

		.btmOp {
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 28upx 0 36upx;
			font-size: 28upx;
			background-color: #fff9ef;
			>text{
				color: #ff752b;
			}
			button {
				border: none;
				outline: none;
				height: 50upx;
				color: #FFFFFF;
				background: linear-gradient(-90deg,#ff4c23 0%,#ff6127 53%,#ff762b 100%);
				border-radius: 25upx;
				line-height: 50upx;
				font-size: 28upx;
				padding: 0 30upx;
				margin: 0;
			}

			button:after {
				border: none;
				outline: none;
				
			}
		}

		.shopBox {
			padding: 36upx 28upx 0 36upx;
			display: flex;
			align-items: center;

			.iconfont {
				font-size: 36upx;
			}

			.icon-shoucangdianjia {
				color: #202932;
				margin-right: 6upx;
			}

			.icon-right {
				color: #c9c9c9;
			}

			.orderStatus {
				color: #ffb423;
				font-size: 28upx;
				margin-top: -4upx;
				flex-grow: 1;
				text-align: right;
			}

			.shopName {
				font-size: 32upx;
				color: #202932;
				margin-top: -4upx;
			}
		}

		.goodBox {
			display: flex;
			margin-top: 32upx;
			padding: 0 28upx 20upx 36upx;
			.goodImg {
				width: 180upx;
				height: 180upx;
				border-radius: 8upx;
				margin-right: 20upx;
				flex-shrink: 0;
			}

			.infoBox {
				display: flex;
				flex-grow: 1;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
			}

			.oldPirce {
				font-size: 28upx;
			}

			.goodName {
				font-size: 28upx;
				color: #202932;
			}

			.priceBox {
				display: flex;
				color: #202932;
				font-size: 28upx;
				align-items: baseline;
			}

			.btnBox {
				width: 100%;
				height: 50upx;
				display: flex;
				justify-content: flex-end;
			}

			.orderOp {
				height: 50upx;
				line-height: 48upx;
				font-size: 28upx;
				color: #ffa023;
				border-radius: 25upx;
				padding: 0 40upx;
				border: 1px solid #ffa023;
				background-color: rgba(0, 0, 0, 0);
				margin: 0;
				align-self: flex-end;
			}

			.orderOp:after {
				outline: none;
				border: none;
			}

			.price {
				color: #ff2020;
				font-weight: bold;
			}
		}
	}
</style>
